<template>
	<view class="shoplistBox">
		<view class="right">
			<view class="goodsListBox" v-if="goodsList.length > 0">
				<view class="goodsItem" v-for="(item, index) in goodsList" :key="index">
					<image v-if="item.img" :src="`${host}${item.img}-t.m60xx`" mode=""></image>
					<view class="shopInfo">
						<view class="shopLeft">
							<view class="name u-line-1">{{ item.title }}</view>
							<view class="price">
								<text class="price__currency">￥</text>{{ item.plat_price }}
								<text class="price__origin">￥{{ item.price }}</text>
							</view>
						</view>
						<view class="shopRight">
							<text :class="item.status == 0 ? 'active buy' : 'buy'" @click="setOff(item)">{{ item.status == 0 ? '上架' : '下架' }}</text>
							<view class="buttonBox">
								<text class="iconfontPT iconzaixianjianli" @click="gotoadd(item.id)"></text>
								<text class="iconfontPT iconshanchu11" @click="del(item)"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else><noData texts="您还未添加套餐,快去添加吧"></noData></view>
		</view>
		<view class="add" @click="gotoadd()"><text>新增套餐</text></view>
	</view>
</template>

<script>
import { getGoodsPac, setOn, setOff, delGoods } from '../../../apis/shop/api.js';
import noData from '../../components/public/no-data.vue';
export default {
	data() {
		return {
			searchVal: '',
			class_id: '',
			store_id: '',
			goodsList: [
				{
					img: '',
					title: '四人经典套餐',
					plat_price: '28.00',
					price: '46.00'
				}
			],
			activeClass: -1,
			store_id: '',
			token: ''
		};
	},
	computed:{
		host(){
			return this.$baseHost.qiniuHost
		}
	},
	onLoad(option) {
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		this.getList();
	},
	onShow(e) {
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1]; //当前页面
		let that = this;
		if (currPage.data.isDoRefesh) {
			currPage.data.isDoRefesh = false;
			that.getList();
		}
	},
	methods: {
		confirm() {
			// this.getList()
		},
		gotoadd(id) {
			if (id != undefined) {
				uni.navigateTo({
					url: '/pages/shopmanager/meal/addmeal?id=' + id
				});
			} else {
				uni.navigateTo({
					url: '/pages/shopmanager/meal/addmeal'
				});
			}
		},
		getList() {
			let that = this;
			getGoodsPac({
				store_id: that.store_id,
				token: that.token
			}).then(res => {
				this.classList = res.data.class;
				this.goodsList = res.data.goods || [];
			});
		},
		getgoods(classid, index) {
			console.log(classid, index);
			this.activeClass = index;
			console.log(this.activeClass);
			this.class_id = classid;
			this.getList();
		},
		del(item) {
			let that = this;
			delGoods({
				id: item.id,
				token: that.token
			}).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '删除成功'
					});
					that.getList();
				}
			});
		},
		setOff(item) {
			let that = this;
			if (item.status == 0) {
				setOn({
					id: item.id,
					token: that.token
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '上架成功'
						});
						that.getList();
					}
				});
			} else if (item.status == 1) {
				setOff({
					id: item.id,
					token: that.token
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '下架成功'
						});
						that.getList();
					}
				});
			}
		}
	}
};
</script>

<style lang="less">
page {
	width: 100%;
	height: 100%;
}
.shoplistBox {
	padding-bottom: 120rpx;
	background-color: #f8f8f8;
	min-height: 100vh;

	.right {
		box-sizing: border-box;
		width: 100%;
		overflow: auto;
		padding: 30rpx;
	
		.goodsListBox {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}
		}
		
		
		.goodsItem {
			box-sizing: border-box;
			height: 180rpx;
			box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			display: flex;
			align-items: flex-start;
		}
		.shopInfo {
			margin-left: 30rpx;
			width: calc(~'100% - 162rpx');
			display: flex;
			justify-content: space-between;
			
			.shopLeft {
				.name {
					font-size: 30rpx;
					color: #343333;
				}
				.price {
					font-size: 30rpx;
					color: #e41805;
					margin-top: 16rpx;
					
					&__currency {
						font-size: 24rpx;
					}
					
					&__origin {
						font-size: 18rpx;
						color: #999;
						text-decoration: line-through;
						margin-top: 8rpx;
						display: block;
					}
				}
			}
			.shopRight {
				text-align: center;
				position: relative;
				.buy {
					display: block;
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					color: #cccccc;
					background-color: #f8f8f8;
					border-radius: 25rpx;
					font-size: 24rpx;

					&.active {
						background-color: #e41805;
						color: #fff;
					}
				}
				.buttonBox {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;

					text {
						font-size: 30rpx;
						color: #333;
						&:nth-child(2) {
							font-size: 34rpx;
						}
					}
				}
			}
		}
	}
}
.add {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30rpx;
	box-shadow: -1rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
	background-color: #fff;

	text {
		display: block;
		padding: 20rpx 0;
		background-color: #e41805;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
	}
}
</style>
